<style scoped>
	/* 视图盒子 */
	.view-box{position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000; }
	/* EAEFF3 */
	.bg-1{height: 50%; background: linear-gradient(to bottom right, #0466c5, #3496F5);}
	.bg-2{height: 50%; background-color: #EAEFF3;}
	
	.login-box{width: 400px; height: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 250px); }
	/* .login-box{} */
	
	
	/* logo */
	.login-top{margin-bottom: 40px; text-align: center; }
	.logo-img{width: 50px; height: 50px; vertical-align: middle;border-radius: 50%; margin-left: -10px; margin-right: 20px;}
	.logo-img{ position: relative; top: -5px; }
	.admin-title{font-size: 28px; color: #FFF; font-weight: 700;}
	
	/* 表单 */
	.from-box{padding: 20px 50px; background-color: #FFF;}
	.from-box{ border-radius: 1px; box-shadow: 1px 1px 2px #666;}
	.from-title{margin-top: 20px; margin-bottom: 30px; text-align: center;}
	
</style>
<template>
	<div class="view-box" v-if="isShow">
		<div class="bg-1"></div>
		<div class="bg-2"></div>
		<div class="login-box">
			<div class="login-box-2">
				<div class="login-top">
					<img src="./../index/admin-logo.png" class="logo-img">
					<span class="admin-title">朝暮-后台管理系统</span>
				</div>
				<div class="from-box">
					<h3 class="from-title">账号登录</h3>
					<el-form size="small" label-position="left" label-width="0px">
						<el-form-item>
							<el-input prefix-icon="el-icon-user" v-model="m.username" placeholder="请输入账号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input prefix-icon="el-icon-unlock" v-model="m.password" type="password" placeholder="请输入密码" @keyup.native.enter="ok()"></el-input>
						</el-form-item>
						<el-form-item>
							<template>
								<!--验证成功的回调函数-->  <!--调用的模式-->  <!--调用的类型 点选或者滑动-->  <!--图片的大小对象-->
								<Verify @success="success" :mode="'pop'"  :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }" 
								ref="verify"
								></Verify>
							</template>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small" style="width: 100%;" @click="useVerify()">登录</el-button>
						</el-form-item>
						<el-form-item>
              <el-tag>测试账号拥有除删除和角色用户管理的其他全部权限</el-tag>
							<!--
								<el-link style="float: right; color: #999;" @click="isShow=false">暂不登录</el-link>
							-->
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<!-- 底部 版权 -->
		<div style="position: absolute; bottom: 40px; width: 100%; text-align: center; color: #666;">
			Copyright ©2023 zm-admin | Design By Knight7z - 提供技术支持
		</div>
	</div>
</template>

<script>
	import Verify from "../../components/verifition/Verify.vue";
	export default {
		name: 'sa-login',
		components:{Verify},
		data() {
			return {
				isShow: true,	// 是否显示当前登陆视图 
				m: {
					username: 'admin',
					password: 'yun666',
					captcha:''
				}
			}
		},
		methods: {
			// 点击确定 
			ok(captcha) {
				// 表单验证  
				if(this.m.username === '' || this.m.password === '' ) {
					return this.sa.error2('请输入完整');
				}
				// 开始登录
				this.sa.loading("正在登录中");
				this.m.captcha=captcha.captchaVerification

        this.request("/api/doLogin",this.m).then((res)=>{
          //console.log(res)
          if(!res){return}
          this.sa.hideloading();
          this.sa.ok2(res.msg);
          setTimeout(function() {
            this.isShow = false;
          }.bind(this), 800);
          this.$bus.$emit('initUser',res.data);
          this.sa.keyListSet("user",res.data);
          this.$bus.$emit('refUserPerm')
          this.$bus.$emit('refDict')
          this.$emit('updateIndexShow');
        })
			},
			//验证码验证成功后
			success(params){
	     		//params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
				//console.log(params);
				this.ok(params)
           	},
           	useVerify(){
              	this.$refs.verify.show()
           	},
			
		},
		mounted(){
			//console.log(this);
		},
		beforeDestroy(){
			console.log("login组件被销毁了");
		}
	}
</script>

